<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style type="text/css">
        label {
            display: inline-block;
            width: 200px;
            text-align: right;
        }
    </style>
</head>
<body>
<div id="app">
    <label>书名</label><input v-model="name"><br>
    <label>出版社</label><input v-model="press"><br>
    <label>出版日期</label><input v-model="date"><br>
    <label>作者</label><input v-model="author"><br>
    <label>库存</label><input v-model="count"><br>
    <label>图片</label><input v-model="image"><br>
    <label></label>
    <button @click="add(name,press,date,author,count,image)">增加</button>

</div>
<script type="text/javascript">
    var press;
    var date;
    var author;
    var count;
    var image;



    var vue = new Vue({
        el: "#app",
        data: {
            name: "",
            press: "",
            date: "",
            author: "",
            count: "",
            image: " "
        },
        methods: {
            add( name,press,date,author,count,image){
                axios({
                    url: "/BookManage_war/Add.do",
                    method: 'post',
                    params: {
                        name: name,
                        press: press,
                        date: date,
                        author: author,
                        count: count,
                        image: image
                    }
                }).then(res => {
                    alert("添加成功");
                });
            }
        }
    });

</script>
</body>
</html>